<template>
  <div class="body">
    <div class="header">
      <dl>
        <dd><img src="../../assets/dimg/d_person_logo.png" alt="" /></dd>
        <dt v-if="userinfo">
          <h1>
            {{ userinfo.mobile | mobil
            }}<span v-show="userinfo.grade === 1"><i>VIP</i></span>
          </h1>
          <p>半途而废的背后，有千万种借口</p>
        </dt>
      </dl>

      <h6>
        <div v-show="userinfo.grade == 0">
          <span>SZ·Club会员 | 加入会员享优质任务</span>
          <i @click="paymemberTo('/member', 0)">立即加入</i>
        </div>

        <div v-show="userinfo.grade == 1">
          <span>会员有效期至 {{ userinfo.vipend_at }}</span>
        </div>
      </h6>

      <ul>
        <li @click="linkTo('/missionrember', 2)">
          <img src="../../assets/img/grzx_icon_one.png" alt="" />
          <p>已完成</p>
        </li>
        <li @click="linkTo('/missionrember', 0)">
          <img src="../../assets/img/grzx_icon_two.png" alt="" />
          <p>进行中</p>
        </li>
        <li @click="linkTo('/missionrember', 1)">
          <img src="../../assets/img/grzx_icon_three.png" alt="" />
          <p>待审核</p>
        </li>
        <li @click="linkTo('/missionrember', 3)">
          <img src="../../assets/img/grzx_icon_four.png" alt="" />
          <p>已下线</p>
        </li>
      </ul>

      <ol>
        <h3></h3>
        <span>账户余额(元)</span>
        <a v-if="userinfo">￥{{ userinfo.amount | money }}</a>
        <i @click="linkTo('/outmoney')">提现</i>
      </ol>
    </div>

    <div class="gray"></div>

    <div class="btm">
      <ul>
        <li @click="paymemberTo('/member')">
          <span>SZ·Club会员特权</span>
          <img src="../../assets/img/gg_icon_right.png" alt="" />
          <i></i>
          <a>深入了解会员权益</a>
        </li>
        <li @click="linkTo('/missionrember', 2)">
          <span>任务记录</span>
          <img src="../../assets/img/gg_icon_right.png" alt="" />
          <i></i>
          <a></a>
        </li>
        <li @click="linkTo('/purse', userinfo.amount)">
          <span>我的钱包</span>
          <img src="../../assets/img/gg_icon_right.png" alt="" />
          <i>查看资金明细</i>
          <a></a>
        </li>
        <li @click="linkTo('/team')">
          <span>我的团队</span>
          <img src="../../assets/img/gg_icon_right.png" alt="" />
          <i>任务分成</i>
          <a></a>
        </li>
        <li @click="linkTo('/personinfo')">
          <span>修改个人信息</span>
          <img src="../../assets/img/gg_icon_right.png" alt="" />
          <i>完善您的个人信息</i>
          <a></a>
        </li>
        <li>
          <span>邀请福利</span>
          <img src="../../assets/img/gg_icon_right.png" alt="" />
          <i></i>
          <a></a>
        </li>
        <li @click="logout()">
          <span>退出登录</span>
          <img src="../../assets/img/gg_icon_right.png" alt="" />
          <i></i>
          <a></a>
        </li>
      </ul>
    </div>

    <div style="height:1rem;"></div>
  </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'mint-ui';

export default {
  name: '',
  data() {
    return {
      userinfo: {},
    };
  },
  mounted() {
    this.getuserinfo();
  },
  methods: {
    //退出登录
    logout() {
      axiosPost('users/logout', {}, (res) => {
        //console.log(res)
        if (res.code !== 1) {
          return Toast(res.msg);
        }
        Toast({
          message: '已退出登录，返回首页',
          duration: 1000,
        });
        localStorage.removeItem('userinfo');
        this.$router.push('/index');
      });
    },

    paymemberTo() {
      if (this.isWeiXin()) {
        this.$router.push({ path: '/paystate' });
      } else {
        this.$router.push({ path: '/member' });
      }
    },

    linkTo(url, id) {
      this.$router.push({ path: url, query: { id: id } });
    },
    getuserinfo() {
      axiosPost(
        'users/user_info',
        {
          user_id: JSON.parse(localStorage.getItem('userinfo')).user_id,
        },
        (res) => {
          //console.log(res)
          if (res.code === -2) {
            localStorage.removeItem('userinfo');
            Toast({
              message: '检测到您还未登录',
              duration: 1000,
            });
            setTimeout(() => {
              this.$router.push('/login');
            }, 1500);
            return;
          }
          if (res.code != 1) {
            localStorage.removeItem('userinfo');
            location.reload();
            return Toast(res.msg);
          }
          this.userinfo = res.data;
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';
.header {
  height: 5.7rem;
  background: @color4 url('../../assets/img/grzx_img_bj.png') center -1.1rem no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  margin-top: -0.2rem;

  dl {
    margin-top: 0.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    dd {
      float: left;
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 0.6rem;

      img {
        width: 100%;
      }
    }
    dt {
      float: left;
      width: 5rem;
      min-height: 1rem;
      h1 {
        font-size: 0.41rem;
        font-weight: 400;
        color: #ffffff;
        padding-left: 0.24rem;
        margin-top: 0.16rem;
        position: relative;
        span {
          width: 0.62rem;
          height: 0.28rem;
          background: rgba(218, 65, 34, 1);
          border: 1px solid @color4;
          border-radius: 0.18rem;
          display: table;
          font-size: @font24;
          font-weight: 400;
          color: @color4;
          text-align: center;
          line-height: normal;
          position: absolute;
          top: 0;
          left: 2.9rem;
          i {
            display: table-cell;
            vertical-align: middle;
          }
        }
      }
      p {
        font-size: @font26;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 0.4rem;
        padding-left: 0.24rem;
      }
    }
  }

  h6 {
    min-height: 0.9rem;
    padding: 0.05rem 0.7rem;
    font-weight: normal;
    div {
      span {
        font-size: @font28;
        font-weight: normal;
        color: #ffffd7;
        line-height: 0.48rem;
        margin-top: 0.12rem;
        float: left;
      }
      i {
        width: 1.36rem;
        font-size: @font24;
        font-weight: normal;
        color: @color4;
        padding: 0.05rem 0;
        cursor: pointer;
        margin-left: 0.25rem;
        margin-top: 0.16rem;
        float: right;
        border-radius: 0.2rem;
        background: #2b2c38;
        text-align: center;
      }
    }
  }

  ul {
    padding: 0.3rem 2%;
    overflow: hidden;
    li {
      float: left;
      width: 25%;
      img {
        height: 0.45rem;
        display: block;
        margin: 0 auto;
        color: @color2;
        font-size: @font26;
      }
      p {
        text-align: center;
        margin-top: 0.1rem;
      }
    }
  }

  ol {
    height: 0.9rem;
    padding-left: 0.4rem;
    line-height: 0.9rem;
    h3 {
      border-top: 1px solid #efefef7a;
    }
    span {
      font-size: @font26;
      color: @color2;
    }
    a {
      font-size: @font36;
      color: @color3;
      margin-left: 0.2rem;
    }
    i {
      float: right;
      width: 2.22rem;
      border: 1px solid #41424f;
      border-radius: 0.5rem;
      text-align: center;
      line-height: normal;
      font-size: 0.56rem;
      cursor: pointer;
      margin: 0.36rem 0.5rem 0 0;
      padding: 0.12rem 0;
      display: table;
      -webkit-transform: scale(0.5) translate(60%, -75%);
      transform: scale(0.5) translate(60%, -75%);
      label {
        display: table-cell;
        vertical-align: middle;
      }
    }
  }
}

.btm {
  background: @color4;
  padding-bottom: 1.66rem;
  ul {
    padding-left: 0.4rem;
    li {
      height: 1.1rem;
      line-height: 1.1rem;
      border-bottom: 1px solid #efefef7a;
      span {
        font-size: @font28;
        color: @color5;
        font-family: PingFang SC;
      }
      a {
        font-size: @font24;
        color: @color1;
        float: right;
        margin-right: 0.1rem;
      }
      i {
        font-size: @font24;
        color: #6868779c;
        float: right;
        margin-right: 0.1rem;
      }
      img {
        display: inline-block;
        width: 0.15rem;
        float: right;
        margin-top: 0.42rem;
        margin-right: 0.4rem;
      }
    }
  }
}
</style>
